<template>
    <ul class="ul-flex">
        <li v-for="(item, index) in holdData" :key="index" class="li-wrap" :style="{ background: `linear-gradient(180deg, ${item.beginColor} 0%, ${item.endColor} 100%)` }">
            <div class="li-left">
                <h6 class="h6-title">{{ item.title }}</h6>
                <p class="num">{{ item.size }}</p>
                <p v-if="item.tipsLeft" class="tips">{{ item.tipsLeft }}</p>
            </div>
            <div class="li-right">
                <img :src="item.iconUrl" alt="" class="icon-logo" />
            </div>
        </li>
    </ul>
</template>

<script>
import { getStoreBldgData } from '@/api/DashBoardApi';
export default {
    props: {
        bgmData: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            holdData: [
                {
                    beginColor: '#f2f9fe',
                    endColor: '#e6f4fe',
                    title: '门店数量(个)',
                    size: '0',
                    tipsLeft: '公开0  非公开0',
                    iconUrl: '/static/icon/board/icon_shop.png'
                },
                {
                    beginColor: '#f5fef2',
                    endColor: '#e6feee',
                    title: '城市数量(个)',
                    size: '0',
                    tipsLeft: '',
                    iconUrl: '/static/icon/board/icon_city.png'
                },
                {
                    beginColor: '#f2f9fe',
                    endColor: '#e6f4fe',
                    title: '公寓管理规模(间)',
                    size: '0',
                    tipsLeft: '公开0  非公开0',
                    iconUrl: '/static/icon/board/icon_house.png'
                },
                {
                    beginColor: '#f6f7ff',
                    endColor: '#ececff',
                    title: '门店总建面(㎡)',
                    size: '0',
                    tipsLeft: '',
                    iconUrl: '/static/icon/board/icon_area.png'
                }
            ]
        };
    },
    mounted() {
       this.cygmFilterSer({});
    },
    methods: {
        cygmFilterSer(parms) {
            this.loading = true;
            getStoreBldgData(parms)
                .then((res) => {
                    if (res && res.obj) {
                        this.holdData[0].size = res.obj.storeTotalNum;
                        this.holdData[0].tipsLeft = '公开' + res.obj.storePubNum + '  非公开' + res.obj.storePriNum;
                        this.holdData[1].size = res.obj.cityTotalNum;
                        this.holdData[2].size = res.obj.aptTotalNum;
                        this.holdData[2].tipsLeft = '公开' + res.obj.aptPubNum + '  非公开' + res.obj.aptPriNum;
                        this.holdData[3].size = res.obj.aptTotalArea;
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
            setTimeout(() => {
                this.loading = false;
            }, 1200);
        }
    }
};
</script>

<style lang="scss" scoped>
.ul-flex {
    display: flex;
    flex-flow: row wrap;
    .li-wrap {
        display: flex;
        align-items: center;
        width: 260px;
        height: 134px;
        border-radius: 20px;
        padding: 16px 20px;
        margin: 12px 20px 0 0;
        .li-left {
            flex: 1;
            align-self: flex-start;
            .h6-title {
                font-size: 14px;
                font-weight: 500;
                color: #1d252f;
            }
            .num {
                font-size: 20px;
                font-weight: bold;
                color: #1d2129;
                margin-top: 30px;
            }
            .tips {
                font-size: 12px;
                color: #4e5969;
                margin-top: 4px;
            }
        }
        .li-right {
            flex: 0 0 60px;
            .icon-logo {
                width: 60px;
                height: 60px;
            }
        }
    }
}
</style>
